<template>
  <el-card class="sales-card">
    <div class="sales-card-header">
      <el-tabs @tab-click="handleClick" v-model="activeName">
        <el-tab-pane label="销售额" name="销售额" />
        <el-tab-pane label="访问量" name="访问量" />
      </el-tabs>
      <div class="sales-date">
        <span @click="setToday">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span>
        <span @click="setYear">今年</span>
        <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
      </div>
    </div>
    <div class="sales-card-body" ref="salesChart">
      <el-row :gutter="20">
        <el-col :lg="18" :md="18" :sm="24">
          <div ref="salesBarChart" class="sales-bar-chart"></div>
        </el-col>
        <el-col :lg="6" :md="6" :sm="24">
          <h5>门店销售额情况</h5>
          <ul>
            <li v-for="(item, index) in activeName === '销售额' ? homeList.orderRank : homeList.userRank" :key="item.no">
              <span :class="{ 'sales-num': index < 3 }">{{ item.no }}</span
              ><span>{{ item.name }}</span
              ><span>{{ item.money }}</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import * as dayjs from 'dayjs'
import * as echarts from 'echarts'
import { mapState } from 'vuex'
export default {
  name: 'Seles',
  data() {
    return {
      activeName: '销售额',
      date: '',
      salesChart: ''
    }
  },
  computed: {
    ...mapState('home', ['homeList'])
  },
  methods: {
    handleClick(tab, event) {
      const { orderFullYearAxis, userFullYearAxis, orderFullYear, userFullYear } = this.homeList
      // console.log(tab, event)
      this.salesChart.setOption({
        title: {
          text: this.activeName === '销售额' ? '销售额趋势' : '访问量趋势'
        },
        xAxis: {
          data: this.activeName === '销售额' ? orderFullYearAxis : userFullYearAxis
        },
        series: { data: this.activeName === '销售额' ? orderFullYear : userFullYear }
      })
    },
    // 1. 今天
    setToday() {
      const today = dayjs().format('YYYY-MM-DD')
      console.log(today)
      // 应该将当前的日期时间显示出来
      this.date = [today, today]
    },
    // 2. 本周
    setWeek() {
      const start = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD')
      const end = dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD')
      this.date = [start, end]
    },
    // 3. 本月
    setMonth() {
      const start = dayjs().startOf('month').format('YYYY-MM-DD')
      const end = dayjs().endOf('month').format('YYYY-MM-DD')
      this.date = [start, end]
    },
    // 4. 本年
    setYear() {
      const start = dayjs().startOf('year').format('YYYY-MM-DD')
      const end = dayjs().endOf('year').format('YYYY-MM-DD')
      this.date = [start, end]
    }
  },
  mounted() {
    this.salesChart = echarts.init(this.$refs.salesBarChart)
    this.salesChart.setOption({
      title: {
        text: '销售额趋势',
        textStyle: {
          fontSize: '14px'
        },
        left: '20px',
        top: '20px'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '35%',
          data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123]
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
.sales-card {
  margin: 10px 0;
  .sales-card-header {
    padding: 10px 20px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sales-date {
      span {
        margin: 0 10px;
        cursor: pointer;
      }
    }
  }
  .sales-card-body {
    .sales-bar-chart {
      width: 100%;
      height: 300px;
    }
    ul {
      list-style: none;
      padding: 0 6px;
      li {
        height: 36px;
        line-height: 36px;
        span {
          padding: 0 10px;
          &:first-child {
            display: inline-block;
            // width: 20px;
            // height: 20px;
            // line-height: 22px;
            text-align: center;
            cursor: pointer;
            margin-right: 20px;
          }
          &.sales-num {
            border-radius: 50%;
            background-color: #000;
            color: #fff;
          }
          &:last-child {
            float: right;
          }
        }
      }
    }
  }
}
</style>